<!DOCTYPE html>
<html>
  <head>
    <title>BarChart! </title>
    <script src="../js/d3.min.js"></script>
  </head>
  <body>
    <svg width="1600" height="800" id="mainsvg" class="svgs"></svg>
    <script>
        const data = [{name: 'Shao-Kui', value:6},
        {name:'Wen-Yang', value:6}, {name:'Cai Yun', value:16}, {name:'Liang Yuan', value: 10}, 
        {name:'Yuan-Chen', value:6}, {name:'Rui-Long', value:10}, {name:'Dong Xin', value:12}, 
        {name:'He Yu', value:20}, {name:'Xiang-Li', value:12}, {name:'Godness', value:20}, 
        {name:'Wei-Yu', value:15}, {name:'Chen Zheng', value:14}, 
        {name:'Yu Peng', value:15}, {name:'Li Jian', value:18}]; 

        const svg = d3.select('#mainsvg');
        const width = +svg.attr('width');
        const height = +svg.attr('height');
        const margin = {top: 60, right: 30, bottom: 60, left: 150};
        const innerWidth = width - margin.left - margin.right;
        const innerHeight = height - margin.top - margin.bottom;

        const xScale = d3.scaleLinear()
        .domain([0, d3.max(data, d => d.value)])
        .range([0, innerWidth]);

        const yScale = d3.scaleBand()
        .domain( data.map(d => d.name) )
        .range([0, innerHeight])
        .padding(0.1);

        const g = svg.append('g').attr('id', 'maingroup')
        .attr('transform', `translate(${margin.left}, ${margin.top})`);

        const xAxis = d3.axisBottom(xScale);
        g.append('g').call(xAxis).attr('transform', `translate(${0}, ${innerHeight})`);

        const yAxis = d3.axisLeft(yScale);
        g.append('g').call(yAxis);

        data.forEach( d => {
          g.append('rect')
          .attr('width', xScale(d.value))
          .attr('height', yScale.bandwidth())
          .attr('fill', 'green')
          .attr('y', yScale(d.name))
        } );

        d3.selectAll('.tick text').attr('font-size', '2em');
        g.append('text').text('Members of CSCG').attr('font-size', '3em')
        .attr('transform', `translate(${innerWidth/2}, ${0})`)
        .attr('text-anchor', 'middle');

    </script>
  </body>
</html>